<template>
  <div v-if="complate">
    <h3>{{ title }}</h3>
    <div>
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item
          v-for="item in brokerLoginPut"
          :key="item.field"
          :label="item.name"
        >
          <el-input v-model="form[item.field]" @input="oninput" style="width:50%" />
        </el-form-item>
      </el-form>
    </div>
    <el-button type="primary" @click="login">登录</el-button>
  </div>
</template>

<script>
import { getBrokerMeta, loginBroker } from '@/api/broker'
export default {
  name: 'ConfigBrokerPage',
  props: {
    title: {
      type: String,
      default: 'UFX'
    },
    pageName: {
      type: String,
      default: 'UFX'
    }
  },

  mounted() {
    this.fetchFormConfig()
  },

  data() {
    return {
      complate: false,
      form: {},
      brokerLoginPut: [
        {
          name: '账号',
          field: 'account',
          value: ''
        },
        {
          name: '密码',
          field: 'password',
          value: ''
        }
      ]
    }
  },

  methods: {
    fetchFormConfig() {
      getBrokerMeta({ name: this.pageName }).then((response) => {
        this.brokerLoginPut = response.data.headers
        this.complate = true
        this.brokerLoginPut.forEach(element => {
          this.form[element.field] = element.value
        })
      })
    },
    login() {
      this.form.brokerName = this.pageName
      loginBroker(this.form)
    },
    oninput() {
      this.$forceUpdate()
    }
  }
}
</script>
